<template>
  <j-modal
    title="修改密码"
    :width="600"
    :visible="visible"
    switchFullscreen
    @ok="handleOk"
    :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }"
    @cancel="close"
    cancelText="关闭"
  >
    <a-form-model ref="form" :rules="validatorRules" :model="form" v-bind="formItemLayout">
      <a-form-model-item label="网格员姓名"> {{ form.realname }} </a-form-model-item>
      <a-form-model-item label="新密码" prop="password">
        <a-input type="password" v-model="form.password" placeholder="请输入登录密码" />
      </a-form-model-item>
      <a-form-model-item label="确认密码" prop="confirmpassword">
        <a-input type="password" @blur="handleConfirmBlur" v-model="form.confirmpassword" placeholder="请重新输入登录密码" />
      </a-form-model-item>
    </a-form-model>
    <template slot="footer">
      <a-button key="back" @click="close">取消</a-button>
      <a-button key="submit" type="primary" @click="handleOk">确定</a-button>
    </template>
  </j-modal>
</template>

<script>
import * as structureApi from '@/api/xlgc/structure.js'
export default {
  name: 'ChangePwdModal',
  data() {
    return {
      visible: false,
      disableSubmit: false,
      confirmDirty: false,
      form: {},
      formItemLayout: {
        labelCol: { span: 6 },
        wrapperCol: { span: 16 }
      },
      confirmLoading: false,
      validatorRules: {
        password: [
          { required: true, pattern: /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,./]).{8,}$/, message: '密码由8位数字、大小写字母和特殊符号组成!' },
          { validator: this.validateToNextPassword }
        ],
        confirmpassword: [
          { required: true, message: '请重新输入登录密码!' },
          { validator: this.compareToFirstPassword }
        ]
      }
    }
  },
  methods: {
    // 修改网格
    edit(record) {
      this.visible = true
      this.$set(this.form, 'id', record.id)
      this.$set(this.form, 'realname', record.realname)
      this.$nextTick(() => {})
    },
    close() {
      this.$emit('close')
      this.form = {}
      this.visible = false
    },
    handleOk() {
      this.$refs.form.validate(valid => {
        if (valid) {
          let formData = Object.assign({}, { id: this.form.id, password: this.form.password })
          structureApi.updataPwd(formData).then(res => {
            if (res.success) {
              this.$message.success(res.message ? res.message : '操作成功！')
              this.close()
            } else {
              this.$message.warn(res.message ? res.message : '操作失败！')
            }
          }).catch(e => {
            this.$message.warn('操作失败！')
          })
      } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    validateToNextPassword(rule, value, callback) {
      let confirmpassword = Object.keys(this.form).length > 0 && this.form.confirmpassword ? this.form.confirmpassword : ''
      if (confirmpassword !== '') {
        this.$refs.form.validateField('confirmpassword')
      }
      callback()
    },
    compareToFirstPassword(rule, value, callback) {
      let password = Object.keys(this.form).length > 0 && this.form.password ? this.form.password : ''
      if (value !== password) {
        callback(new Error('两次输入的密码不一样！'))
      } else {
        callback()
      }
    },
    handleConfirmBlur(e) {
      const value = e.target.value
      this.confirmDirty = this.confirmDirty || !!value
    }
  }
}
</script>
<style lang="less" scoped></style>
